<template>
  <div class="ForwardAndDelayInfo_box">
    <Info title="提前或延期缴纳申报" />
    <el-card class="table_card">
      <div slot="header" class="clearfix">
        <span>提前缴纳</span>
      </div>
      <!-- 表格 -->
      <div class="tabel_box1">
        <div class="addBtn">
          <el-button type="primary">添加</el-button>
        </div>
        <el-table :data="tableData" border style="width: auto">
          <!-- 缴纳税种 -->
          <el-table-column label="缴纳税种" width="auto">
            <template slot-scope="scope">
              <el-select
                v-model="ruleForm[`region${scope.row.$index}`]"
                placeholder="请选择活动区域"
              >
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <!-- 项目 -->
          <el-table-column label="项目" width="auto">
            <template slot-scope="scope">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <!--  提前缴纳金额(万元)-->
          <el-table-column label="提前缴纳金额(万元)" width="auto">
            <template slot-scope="scope">
              <el-input
                v-model="form[`input${scope.row.$index}`]"
                placeholder="请输入内容"
              ></el-input
            ></template>
          </el-table-column>
          <!--  预计抵扣时间-->
          <el-table-column label="预计抵扣时间" width="auto">
            <template slot-scope="scope">
              <el-date-picker
                v-model="value2"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <!-- 状态 -->
          <el-table-column label="状态" width="auto">
            <template slot-scope="scope">
              <div
                :class="{ zhuangtaiColorClass: scope.row.name }"
                class="zhuangtaiClass"
              ></div>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="auto">
            <template slot-scope="scope">删除 </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 延期 -->
    <el-card class="table_card">
      <div slot="header" class="clearfix">
        <span>延期缴纳</span>
      </div>
      <!-- 表格 -->
      <div class="tabel_box">
        <div class="addBtn">
          <el-button type="primary">添加</el-button>
        </div>
        <el-table :data="tableData" border style="width: auto">
          <!-- 缴纳税种 -->
          <el-table-column label="缴纳税种" width="auto">
            <template slot-scope="scope">
              <el-select
                v-model="ruleForm[`region${scope.row.$index}`]"
                placeholder="请选择活动区域"
              >
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <!-- 项目 -->
          <el-table-column label="项目" width="auto">
            <template slot-scope="scope">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </template>
          </el-table-column>

          <!--  本月缓纳金额(万元)-->
          <el-table-column label="本月缓纳金额(万元)" width="auto">
            <template slot-scope="scope">
              <el-input
                v-model="form[`input${scope.row.$index}`]"
                placeholder="请输入内容"
              ></el-input
            ></template>
          </el-table-column>
          <!--  预计抵扣时间-->
          <el-table-column label="预计抵扣时间" width="auto">
            <template slot-scope="scope">
              <el-date-picker
                v-model="value2"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <!-- 主观税务当局是否审批 -->
          <el-table-column label="主观税务当局是否审批" width="auto">
            <template slot-scope="scope">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="auto">
            <template slot-scope="scope">删除 </template>
          </el-table-column>
        </el-table>
      </div>

      <br />
      <!-- <div class="TotalNum1"></div> -->
    </el-card>
    <!-- 相关文件 -->
    <RelevantAttachments />
  </div>
</template>
<script >
import Info from "./components/info.vue";
import RelevantAttachments from "./components/RelevantAttachments";
export default {
  components: {
    Info,
    RelevantAttachments,
  },
  data() {
    return {
      fileList: [],

      form: {},
      value2: "",
      tableData: [
        {
          title: "税种",
          name: "万达集团",
          zhao: "--",
          zhibiao: "1700.12",
          nashui: 22,
        },
        {
          title: "税种",
          name: "万达集团",
          zhao: "--",
          zhibiao: "1700.12",
          nashui: 22,
        },
      ],
      ruleForm: {
        // 变量
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    pickerOptions() {},
    handleChange() {},
    // fileList() {},
  },
};
</script>

<style scoped lang='scss'>
.flexClass {
  display: flex;
}
.header {
  color: #498ab8;
  margin-bottom: 20px;
}
// 表单input
.inputForm {
  margin-right: 10px;
}
//表格box
.tabel_box1 {
  position: relative;
  margin-top: 10px;
  //   text-align: right;
}
.tabel_box {
}
// 表格状态
.zhuangtaiClass {
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: red;
}
// 表格状态颜色
.zhuangtaiColorClass {
  background-color: #6ccf60;
}
// 添加按钮
.addBtn {
  margin-bottom: 10px;
  text-align: right;
}
</style>